<template>
    <div class="channel-edit">

        <!-- 我的频道 -->
        <van-cell :border="false">
            <div slot="title" class="title-text">我的频道</div>
            <van-button class="edit-btn" type="danger" plain round size="mini" @click="isEdit = !isEdit">{{ isEdit ?
            '完成' : '编辑' }}</van-button>
        </van-cell>
        <van-grid :gutter="10" :clickable="true" class="van-frid-f">
            <van-grid-item class="grid-item" v-for="(channel,index) in myChannels" :key="index"
                @click="onMyChannelClick(channel,index)">
                <!-- X 图标 -->
                <!-- && !fiexdChannels.includes(channel.id) -->
                <!-- 用于判断 fiexdChannels数组中 有无包含此频道的id ，返回布尔值  -->
                <van-icon v-show="isEdit && !fiexdChannels.includes(channel.id)" slot="icon" name="clear"></van-icon>
                <span class="text" slot="text" :class="{active: index === active}">{{ channel.name }}</span>
            </van-grid-item>

        </van-grid>
        <!-- 我的频道 -->

        <!-- 频道推荐 -->
        <van-cell :border="false">
            <div slot="title" class="title-text">频道推荐</div>
        </van-cell>
        <van-grid :gutter="10" :clickable="true" direction="horizontal">
            <van-grid-item class="grid-item" v-for="(channel,index) in recommendChannels" :key="index" icon="plus"
                :text="channel.name" @click="onAddChanel(channel)" />
        </van-grid>
        <!-- 频道推荐 -->

    </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem, getItem } from '@/utils/storage'

export default {
    name: 'ChannelEdit',
    data() {
        return {
            allChannels: [], // 所有频道
            // 因为 myChannelss 是从父组件传过来的值，你在子组件内对 myChannelss 进行修改，违反了单向数据流原则。
            myChannels: this.myChannelss, // 我的频道列表
            isEdit: false, //控制编辑状态的显示
            fiexdChannels: [0]  //存储固定频道的id， 不允许删除
        }
    },
    computed: {
        ...mapState(['user']),
        // 简化版 
        recommendChannels() {
            return this.allChannels.filter(channels => {
                return !this.myChannels.find(myChannel => {
                    return myChannel.id === channels.id
                })
            })
        }
        // recommendChannels() {
        //     const channels = []  // 定义推荐频道数组
        //     this.allChannels.forEach(channel => {
        //         // find遍历数组，找到满足条件的元素项
        //         const ret = this.myChannels.find(myChannel => {
        //             return myChannel.id === channel.id
        //         })
        //         // 如果我的频道中不包括该频道，则收集到推荐频道中
        //         if (!ret) {
        //             channels.push(channel)
        //         }
        //     })
        //     // 把计算结果返回
        //     return channels
        // }
    },
    props: {
        myChannelss: {
            type: Array,
            required: true
        },
        active: {
            type: Number,
            required: true
        }
    },
    created() {
        this.loadAllChannels()
    },
    methods: {
        // 加载所有频道数据
        async loadAllChannels() {
            try {
                const { data } = await getAllChannels()
                this.allChannels = data.data.channels
                // console.log(this.allChannels);
            } catch (err) {
                this.$toast('获取数据失败')
            }

        },
        // 添加频道按钮函数
        async onAddChanel(channel) {
            //因为 推荐频道的数组 是采用计算属性得到的，计算属性会观测内部依赖数据的变化，如果依赖的数据发生变化，则计算属性会重新执行 。
            this.myChannels.push(channel)
            // 此时应对 myChannels 进行 push，同时会同步 myChannelss 。
            //  而不能对 myChannelss 进行push
            // this.myChannelss.push(channel) X

            //数据持久化处理
            if (this.user) {
                try {
                    // 已登录，把数据请求接口放到线上 
                    await addUserChannel({
                        id: channel.id, //频道ID
                        seq: this.myChannels.length // 序号
                    })
                } catch (err) {
                    this.$toast('保存失败，请稍后重试')
                }

            } else {
                // 未登录，把数据存储到本地
                setItem('TOUTIAO_CHANNELS', this.myChannels)
            }
        },

        // 编辑和非编辑状态下，我的频道的处理
        onMyChannelClick(channel, index) {
            if (this.isEdit) {
                // 1、如果是固定频道，则不删除
                if (this.fiexdChannels.includes(channel.id)) {
                    return
                }

                // 2、处在编辑状态，执行删除频道
                this.myChannels.splice(index, 1)

                // 3、如果删除的频道在激活频道的前面，则需要更新 active ，让其减一
                // 参数1：要删除的元素的索引
                // 参数2：删除的个数，如果不指定，则从参数1 开始一直删除到最后
                if (index <= this.active) {
                    // 让激活频道的索引 -1
                    this.$emit('update-active', this.active - 1, true)
                }

                // 4、处理持久化
                this.deleteChannel(channel)

            } else {
                // 处在非编辑状态，执行切换频道
                this.$emit('update-active', index, false)
            }

        },

        // 数据持久化函数，删除频道函数
        async deleteChannel(channel) {
            try {
                if (this.user) {
                    // 已登录，则将数据更新到线上
                    await deleteUserChannel(channel.id)
                } else {
                    // 未登录，将数据更新到本地
                    setItem('TOUTIAO_CHANNELS', this.myChannels)
                }
            } catch (err) {
                this.$toast('操作失败，请稍后重试')
            }

        }
    }
}
</script>

<style scoped lang="less">
.channel-edit {
    padding: 85px 0;

    .van-cell--borderless {
        align-items: center;
        padding: 32px;
    }

    .title-text {
        font-size: 32px;
        letter-spacing: 2px;
        color: #333333;
    }

    .edit-btn {
        width: 104px;
        height: 48px;
        letter-spacing: 1px;
        font-size: 26px;
        color: #f85959;
        border: 1px solid #f85959;
    }

    // 此时发现背景色不起作用
    // 原因：作用域样式，自定义的类名是在组件的根节点，van-grid-item__content 类名为非跟节点，此时需要用 /deep/
    /deep/.grid-item {
        width: 160px;
        height: 86px;

        .van-grid-item__content {
            // 即使标签有多个文字，也一行显示，不加这句聚会自动换行
            white-space: nowrap;
            background-color: #f4f5f6;
            border-radius: 6px;

            .van-grid-item__text {
                font-size: 28px;
                color: #222;
            }
        }

        .van-grid-item__icon {
            font-size: 25px;
        }

        .van-grid-item__text,
        .text {
            font-size: 28px;
            letter-spacing: 1px;
            color: #222222;
            margin-top: 0;
            margin-left: 8px;
        }

        .active {
            color: red;
        }

        .van-grid-item__icon-wrapper {
            position: unset;

            .van-icon-clear {
                position: absolute;
                top: -5px;
                right: -5px;
                color: #cacaca;
                z-index: 3;
                font-size: 25px;
            }
        }
    }

}
</style>